<template>
  <div>




    <el-row>
      <el-col :span="8">

        <el-input v-model="input" placeholder="输入组名" size="mini" style="width: 200px"></el-input>

        <el-button size="mini">查询</el-button>

        <el-button size="mini"  @click="addgroup()">新增</el-button>

      </el-col>
      <el-col :span="8">
        <center><div>用户关联</div></center>

      </el-col>
      <el-col :span="8">
        <el-input v-model="input" placeholder="输入组名" size="mini" style="width: 200px"></el-input>

        <el-button size="mini" @click="selectUser()">查询</el-button>





      </el-col>
    </el-row>

















    <el-row>


      <el-col :span="8">




        <template>
          <el-table
            :data="userGroup"
            @row-click="userselect"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="name"
              label="用户组"
            >
            </el-table-column>
          </el-table>
        </template>




      </el-col>


      <el-col :span="8">







        <template v-if="userIdflag">
          <el-table
            :data="tableDataRelate"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="loginName"
              label="登录名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mobileNo"
              label="手机">
            </el-table-column>
            <el-table-column
              prop="wxName"
              label="微信名">
            </el-table-column>

            <el-table-column

              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button size="small" @click="removeRelateUser(scope.row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>





        <template  v-if="bussine">
          <el-table
            :data="BussinetableDataRealte"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="name"
              label="企业名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="limit"
              label="受限人数">
            </el-table-column>
            <el-table-column
              prop="password"
              label="授权码">
            </el-table-column>

            <el-table-column

              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button  size="small" @click="removeRelateBussine(scope.row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>










      </el-col>











      <el-col :span="8">





        <template v-if="userIdflag">
          <el-table
            :data="tableData"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="loginName"
              label="登录名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mobileNo"
              label="手机">
            </el-table-column>
            <el-table-column
              prop="wxName"
              label="微信名">
            </el-table-column>

            <el-table-column

              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button  size="small" @click="movegroup(scope.row)">移入</el-button>
              </template>
            </el-table-column>
          </el-table>




          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :currentPage=currentPage4
            :page-sizes="[100, 200, 300, 400]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </template>


        <template  v-if="bussine">
          <el-table
            :data="BussinetableData"
            border
            height="750"
            style="width: 100%;">
            <el-table-column
              prop="name"
              label="企业名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="limit"
              label="受限人数">
            </el-table-column>
            <el-table-column
              prop="password"
              label="授权码">
            </el-table-column>

            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button  size="small" @click="movegroup(scope.row)">移入</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

















      </el-col>
    </el-row>



    <el-dialog title="新增组" :visible.sync="dialogFormVisible" size="mini" style="width: 100%;height: 500px">
      <el-form :model="form" size="mini" :inline="true">
        <el-form-item label="组名" :label-width="formLabelWidth" >
          <el-input v-model="form.attr" ></el-input>
        </el-form-item>

        <el-form-item label="编码" :label-width="formLabelWidth" >
          <el-input v-model="form.name"   :inline="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="" size="mini"> 确 定</el-button>
      </div>
    </el-dialog>







  </div>
</template>

<script>

  import axios from 'axios';


  export default {
    name: 'HelloWorld',
    data() {
      return {
        tableData: [],
        currentPage4: 1,
        total: 0,
        input: "",
        pageSize: 100,
        userGroup:[],
        tableDataRelate:[],
        groupId:[],
        dialogFormVisible:false,
        form:{},
        formLabelWidth:"180",
        labelWidth:"180",
        bussine:false,
        userIdflag:true,
        BussinetableData:[],
        BussinetableDataRealte:[],
      }
    },


    methods: {
      handleSizeChange(val) {
        this.pageSize = `${val}`;

        let pageSize = this.pageSize;
        console.log(pageSize);
        let obj = {
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(pageSize),
          "total": 0
        }

        this.getPage(obj);

      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = `${val}`;

        console.log(this.currentPage4);

        let obj = {
          "currentPageNum": this.currentPage4,
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        }
        this.getPage(obj);


      },


      getPage(obj) {
        axios.post(process.env.BASE_API + 'manage/page/user', obj).then(respone => {
          this.tableData = respone.data.member;
          this.total = respone.data.total;
        })
          .catch(error => {

          });





      },
      getPageinitialization(obj,date){

        axios.post(process.env.BASE_API + obj.url,obj.data).then(respone => {
          this.BussinetableData = respone.data.member;
          this.total = respone.data.total;
        }).catch(error => {

        });


      },








      getPage1(obj, b) {
        axios.post(process.env.BASE_API + obj.url, obj.data).then(respone => {
          this.userGroup = respone.data.member;
          this.total = respone.data.total;
        })
          .catch(error => {

          })


      },
      userselect(row){
        this.groupId = row.id;

        if( this.groupId !=3){
          this.bussine=false;
          this.userIdflag=true;

          let obj2= {data:{
              "currentPageNum": 1,
              "endIndex": 0,
              "pageSize": parseInt(this.pageSize),
              "total": 0
            },
            url:"manage/page/getMembersGroup/",
          };
          axios.get(process.env.BASE_API + obj2.url+ this.groupId).then(respone => {
            this.tableDataRelate = respone.data;
            //  this.total = respone.data.total;
          })
            .catch(error => {
            })
        }else{
          //   http://localhost:20000/manage/page/getPageBussiness
          this.bussine=true;
          this.userIdflag=false;


          let obj2= {data:{
              "currentPageNum": 1,
              "endIndex": 0,
              "pageSize": parseInt(this.pageSize),
              "total": 0
            },
            url:"manage/getBussinetableDataRealte",
          };
          axios.get(process.env.BASE_API + obj2.url).then(respone => {
            this.BussinetableDataRealte = respone.data;
            //  this.total = respone.data.total;
          })
            .catch(error => {
            })


        }










      },
      removeRelateUser(row){
        let obj2= {data:{
            "groupId": this.groupId,
            "memberId": row.id
          },
          url:"manage/deleteUserRelate",
        };
        console.log(obj2.data);
        axios.delete(process.env.BASE_API + obj2.url,{data:obj2.data}).then(respone => {
          this.tableDataRelate = respone.data;
          //  this.total = respone.data.total;
        })
          .catch(error => {

          })

      },
      movegroup(row){
        let obj2= {data:{
            "groupId": this.groupId,
            "memberId": row.id
          },
          url:"manage/insertSelective",
        };
        axios.post(process.env.BASE_API + obj2.url,obj2.data).then(respone => {
          if(this.groupId==3){
            this.BussinetableDataRealte = respone.data;
          }else{
            this.tableDataRelate = respone.data;
          }




        })
          .catch(error => {

          })





      },

      selectuser(){

      },

      addgroup(){
        this.dialogFormVisible=true;

      },


      //移除企业用户
      removeRelateBussine(row){
        let obj2= {data:{
            "groupId": this.groupId,
            "memberId": row.id
          },
          url:"manage/deleteUserRelate",
        };
        axios.delete(process.env.BASE_API + obj2.url,{data:obj2.data}).then(respone => {
          this.BussinetableDataRealte = respone.data;
          //  this.total = respone.data.total;
        })
          .catch(error => {

          })


      }




    },
    mounted() {
      //  http://localhost:20000/manage/page/user
      let obj = {
        "currentPageNum": 1,
        "endIndex": 0,
        "pageSize": parseInt(this.pageSize),
        "total": 0
      }
      this.getPage(obj);

      let obj2= {data:{
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        },
        url:"manage/page/group",
      };
      this.getPage1(obj2,this);
      let obj3= {data:{
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        },
        url:"manage/page/getPageBussiness",
      };
      let data={
        data:this.BussinetableData,
        total:0
      }
      this.getPageinitialization(obj3,data);



    },


  }
</script>

<style scoped>


</style>
